<template>
  <el-form label-width="100px">
    <el-form-item label="SPU名称"> {{ skuParams.spuName }} </el-form-item>
    <el-form-item label="SKU名称">
      <el-input
        v-model="skuParams.skuName"
        placeholder="请输入SKU名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <!-- input框中的type属性有多种属性值,number是设置数字的 -->
      <el-input
        v-model="skuParams.price"
        placeholder="请输入价格(元)"
        type="number"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input
        v-model="skuParams.weight"
        placeholder="请输入重量(千克)"
      ></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input
        v-model="skuParams.skuDesc"
        placeholder="请输入描述"
        type="textarea"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrArr"
          :key="attr.id"
        >
          <!-- 
            将v-model绑在attr身上时因为一个attr代表一个平台属性,
            里面包含了属性id以及属性值的id 
          -->
          <el-select
            placeholder="请选择"
            clearable
            v-model="attr.attrIdAndAttrValueId"
          >
            <el-option
              :label="item.valueName"
              :value="`${attr.id}:${item.id}`"
              v-for="(item, index) in attr.attrValueList"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          :label="sale.saleAttrName"
          v-for="(sale, index) in saleArr"
          :key="sale.id"
        >
          <el-select
            placeholder="请选择"
            clearable
            v-model="sale.saleIdAndSaleValueId"
          >
            <el-option
              :label="item.saleAttrValueName"
              :value="`${sale.id}:${item.id}`"
              v-for="(item, index) in sale.spuSaleAttrValueList"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table border stripe :data="imgArr" ref="tableRef">
        <el-table-column label="序号" type="selection"> </el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" alt="" style="width: 70px; height: 90px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"> </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="success" size="small">默认</el-button>
            <el-button type="primary" size="small">设置为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reqAttrList } from "@/api/product/attr/attr";
import { reqHadSalesAttr, reqImgList } from "@/api/product/spu/spu";
import { ref } from "vue";

// 定义响应式数据
// 平台属性
let attrArr = ref([]);
// 销售属性
let saleArr = ref([]);
// 图片列表
let imgArr = ref([]);

// 定义需要发送给服务器的数据
let skuParams = ref<any>({
  category3Id: 0, //三级分类的id
  tmId: 0, //品牌id
  spuId: 0, //spu的id
  price: 0, //价格
  weight: "", //重量
  skuDesc: "", //描述
  skuName: "", //sku的名称
  spuName: "",
  skuDefaultImg: "", //默认图片地址
  skuAttrValueList: [
    //平台属性
    //   {
    //     "attrId": 0,//属性的id
    //     "valueId": 0,//属性值的id
    //   }
  ],
  skuSaleAttrValueList: [
    //销售属性
    //   {
    //     "saleAttrId": 0,//销售属性的id
    //     "saleAttrValueId": 0,//销售属性值的id
    //   }
  ],
});

// 定义方法,当父组件点击添加SKU按钮时调用
const initSkuData = async (c1Id: number, c2Id: number, row) => {
  // 收集数据
  // 三级分类的id
  skuParams.value.category3Id = row.category3Id;
  // 品牌的id
  skuParams.value.tmId = row.tmId;
  // spu的id
  skuParams.value.spuId = row.id;
  // spu的名称
  skuParams.value.spuName = row.spuName;
  // 平台属性
  let res = await reqAttrList(c1Id, c2Id, row.category3Id);
  // 销售属性
  let res1 = await reqHadSalesAttr(row.id);
  // 图片列表
  let res2 = await reqImgList(row.id);
  // 存储服务器返回的数据
  attrArr.value = res;
  saleArr.value = res1;
  imgArr.value = res2;
};

// 对外暴露子组件身上的方法
defineExpose({
  initSkuData,
});
</script>

<style scoped>
</style>